<template>
  <div class="nav-group">
    <div class="nav-header" @click="() => $router.push({ path: '/' })">
      <svg-icon class="app-logo" icon="icon-logo" />
    </div>
    <div class="nav-content">
      <div class="nav-button">
        <button class="new-button" @click="setTheme">
          <div class="button-wrapper">
            <div id="plus-icon" class="plus-icon">
              <svg-icon icon="plus-theme"></svg-icon>
            </div>
            <div class="build-button">主题</div>
          </div>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    setTheme() {
      this.$store.dispatch("theme/setTheme");
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-group {
  width: 64px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--nav-group-background);
  box-shadow: rgb(0 0 0 / 5%) 9px 0px 28px 0px;
  
  .nav-header {
    width: 100%;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: var(--font-color);

    .app-logo {
      width: 46px;
      height: 46px;
    }
  }

  .nav-content {
    width: 100%;
    height: calc(100% - 64px);
    box-sizing: border-box;
  }
}

.new-button {
  width: 100%;
  margin: 0px;
  padding: 0px;
  appearance: none;
  background: none;
  border: 0px;
  outline: 0px;

  .button-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 64px;
    margin: 0px auto;
    border-radius: 4px;
    position: relative;

    .plus-icon {
      width: 30px;
      height: 30px;
      background: var(--theme-color);
      box-shadow: rgb(236 73 84 / 25%) 0px 4px 6px 0px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .build-button {
      margin-top: 4px;
      font-size: 12px;
      color: var(--font-color);
    }
  }
}
</style>